<template>
	<section>
		<!--卡牌1-->
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="line-height: 36px;">Application Attempt Overview</span>
			</div>
			<div v-for="item in infoAs" class="text item ">
				<div style="text-align: right; "  class="one">{{item.name+' : '}}</div>
				<div  class="one">{{item.val}}</div>

			</div>
		</el-card>
		<!--表2-->
		<el-card class="box-card">
			<!--<div slot="header" class="clearfix">
				<span style="line-height: 36px;">{{ms}}</span>
			</div>-->
			<div>{{ms}}</div>
			<!--列表-->
			<el-table
							v-loading="listLoading"
							:data="tableInfoData"
							border
							stripe
							style="width: 100%">
				<el-table-column v-for="item in tableInfoTile"
												 :prop="item.key"
												 :label="item.name">
				</el-table-column>
			</el-table>
		</el-card>

		<!--工具条-->
		<!--<el-col :span="24" class="toolbar">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="formInline.user" placeholder="姓名"></el-input>
				</el-form-item>

			</el-form>
		</el-col>-->

		<!--列表-->
		<el-table
						v-loading="listLoading"
						:data="tableData"
						border
						stripe
						style="width: 100%"
						@selection-change="handleSelectionChange">
			<el-table-column v-for="item in tableTile"
											 :prop="item.key"
											 :label="item.name">
			</el-table-column>
			<!--<el-table-column label="模块名称">
				<template scope="scope">
					<router-link :to="'page311/'+scope.row.id">{{scope.row.mod}}</router-link>
				</template>
			</el-table-column>-->
			<el-table-column label="Logs">
				<template scope="scope">
					<!--<router-link :to="'/page332/'+scope.row.id">logs</router-link>-->
					<el-button type="text"  @click="logs=true">logs</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--分页-->
		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
			<el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="20" layout="total, sizes, prev, pager, next, jumper"
										 :total="400" style="float:right">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog :title="formTitle" v-model="logs">
      <pre>
          webpack: wait until bundle finished: /index.html
          webpack built 1637733327a6a4fdb3ca in 11626ms
          Hash: 1637733327a6a4fdb3ca
          Version: webpack 1.14.0

          webpack: wait until bundle finished: /index.html
          webpack built 1637733327a6a4fdb3ca in 11626ms
          Hash: 1637733327a6a4fdb3ca
          Version: webpack 1.14.0
      </pre>
		</el-dialog>
	</section>
</template>

<script>
	//	import util from '../../common/util'

	export default {
		data() {
			return {
				tableInfoTile:[{
					key:"tl",
					name:""
				},{
					key:"node",
					name:"Node Local Request"
				},{
					key:"rack",
					name:"Rack Local Request"
				},{
					key:"off",
					name:"Off Switch Request"
				},
				],
				tableInfoData:[{

				}],
				ms:"Each Table cell represents the number of Nodelocal/RackLocal/OffSwitch contauers stusfied by NodeLocal/RacKolcal/OffSwitch redource requests.",
				infoAs:[{
					name:'Application Attempt State',
					val:'FINISHED'
				},{
					name:'Started',
					val:'Thu Jan 12 17:33:55 +0800 2017'
				},{
					name:'Elapsed',
					val:'11mins, 13sec'
				},{
					name:'AM Container',
					val:'Container_e51_148211337096_0001_01_00001'
				},{
					name:'Node',
					val:'hdp10.cmsz.com:234'
				},{
					name:'Tracking Url',
					val:'History'
				},{
					name:'Diagnostics Info',
					val:'Session stats:submittedDAGs=0,successfulDAGs=2'
				},{
					name:'Blacklisted Nodes',
					val:' - '
				},
				],
				infoBs:[
				],
				logs:false,
				formInline:{user:''},
				tableTile:[{
					key:"id",
					name:"Container ID"
				},{
					key:"node",
					name:"Node"
				},{
					key:"status",
					name:"Container Exit Status"
				},/*{
				 key:"logs",
				 name:"Logs"
				 },*/
				],
				tableData:[]
			}
		},
		methods:{
			getInfoData:function () {
				let arr = []
				for(let i=1;i<5;i++){
					let obj = {
						tl:`Num Node Local Containers (satisfied by)`,
						node:0,
						rack:2%i+'',
						off:2%i+'',
					}
					arr.push(obj)
				}
				this.tableInfoData = arr;
			},
			getData:function () {
				let arr = []
				for(let i=0;i<5;i++){
					let obj = {
						id:`${i}`,
						status:`1`,
						node:`http://he.cmz.com:787`,
						logs:`logs`,
					}
					arr.push(obj)
				}
				this.tableData = arr;
			},
			handleSelectionChange:function () {

			},

		},
		mounted:function () {
			this.getData()
			this.getInfoData()
		}
	}
</script>

<style scoped>
	.box-card {
		margin-bottom: 10px;
	}
	.one {
		display: inline-block;
		width: 49%;
	}
	.el-card__heade{
		padding: 7px 20px;
	}

</style>